{% extends "base.html" %}
{% block extra_js %}
<script type="text/javascript">
  $(function() {
    $("#tabs").tabs();
    $("#ptabs").tabs();
  });
</script>
{% endblock %}
{% block content %}
<h1>{{ titulo }}</h1>
<p class="mensaje">
{{mensaje}}
</p>
<div id="ptabs">
  <ul>
    <li><a href="#ptabs-1">Resultados</a></li>
    <li><a href="#ptabs-2">Reporte</a></li>
    <li><a href="#ptabs-3">Detalle</a></li>
  </ul>
<div id="ptabs-1">
  <table class="contenedor" border="0">
  <caption>Archivo de usuario: <i>{{datos.filename}}</i> ({% now "d-m-Y H:i:s" %}) </caption>
<!--
  <thead>
    <tr>
      <th colspan="2"><h1>Archivo de usuario: <i>{{datos.filename}}</i> ({% now "d-m-Y H:i:s" %})</h1></th>
    </tr>  
  </thead>  
-->  
  <tr>
    <td>  
    <div class="scroll">
    <table class="data">
    <thead>
      <tr>
        <th>Item</th>
        <th>Valor</th>
        <th>Unidad</th>
      </tr>
    </thead>  
    <tbody>
      <tr class="odd">
        <td> Caudal</td> 
        <td>{{ datos.caudal|floatformat:2}}</td>
        <td> m<sup>3</sup>/d </td>
      </tr>
      <tr class="even">
        <td> Distancia observacion</td> 
        <td>{{ datos.distancia|floatformat:2}}</td>
        <td> m </td>
      <tr class="odd">
        <td> Transmisividad</td> 
        <td>{{ datos.trans|floatformat:0}}</td>
        <td> m<sup>2</sup>/d </td>
      </tr>
      <tr class="even">
        <td> Almacenamiento</td> 
        <td>{{ datos.stralmac}}</td>
        <td> - </td>        
      </tr>
      {% if datos.rdB %}
      <tr class="even">
        <td> r/B </td> 
        <td>{{ datos.rdB }}</td>
        <td> - </td>        
      </tr>
      {% endif %}
    </tbody>
    </table>
    <div>
    </td>  
    <td>  
    <div class="scroll">
      <table class="data">
      <thead>
        <tr>
          <th>Id</th>
          <th>Tiempo (dias)</th>
          <th>S<sub>observado</sub> (m)</th>
          <th>S<sub>calculado</sub> (m)</th>
          <th>&Delta; S (m)</th>
          <th>(&Delta; S)<sup>2</sup> (m<sup>2</sup>)</th>
        </tr>
      </thead>  
      <tbody>
      {{daatos.data}}
      {% for p in  datos.data %}
        <tr class="{% cycle odd,even %}">
          <td>{{ forloop.counter}} </td>
          <td> {{ p.t|floatformat:6}}</td> 
          <td>{{ p.s|floatformat:3}}</td>
          <td>{{ p.sCalc|floatformat:3}} </td>
          <td>{{ p.deltaS|floatformat:6}} </td>
          <td>{{ p.deltaSC|floatformat:6}} </td>
        </tr>
      {% endfor %}
      </tbody>
      </table>    
    </div>
    </td>
  </tr>
  <tr>
    <td class="imagen" colspan="2">
    <img src="{{archivoPNG.0}}" border="0" alt="Grafico ajuste" height="430">
    </td>
  </tr>
  </table>
  <p class="mensaje">
  {{ayuda}}
  </p>
</div><!-- End  ptabs-1-->

<div id="ptabs-2">
<br />
<h1>interpretacion</h1>
  <div class="demo">
    <div id="tabs">
      <ul>
        <li><a href="/interpretar/daac/">Confinado</a></li>
        <li><a href="/interpretar/daasc/">Semiconfinado</a></li>
        <li><a href="/interpretar/daal/">Libre</a></li>
      </ul>
    </div>
  </div><!-- End demo -->
</div><!-- End  ptabs-2-->
<div id="ptabs-3">
Aca van los datos
</div><!-- End  ptabs-3-->
</div><!-- End  ptabs-->

{% endblock %}

